<template>
  <div style="padding: 0.3rem;">
    <div class="flexbc" style="margin-bottom: 0.1rem;">
      <div>支付宝账号：</div>
      <div><van-button type="primary" size="small" text="修改" @click="$router.push('/zhifubao')"></van-button></div>
    </div>
    <div v-if="shoukuanzhanghu.name" style="color: #999; font-size: 0.25rem;">
      <div style="margin-bottom: 0.1rem;">账户名：{{shoukuanzhanghu.name}}</div>
      <div>账户号：{{shoukuanzhanghu.account}}</div>
    </div>
    <div v-if="!shoukuanzhanghu.name" style="color: #999;  font-size: 0.25rem;">尚未设置</div>

    <div style="background: #fff; padding: 0.3rem; border-radius: 0.1rem; margin-top: 0.5rem;">
      <div class="flexbc" style=" padding: 0.3rem 0; border-bottom: 1px #eaeaea solid;">
        <div>昨日收益</div>
        <div style="color: #f00; font-weight: bold;">￥{{list.yesterday_income}}元</div>
      </div>
      <div class="flexbc" style=" padding: 0.3rem 0; border-bottom: 1px #eaeaea solid;">
        <div>上周收益</div>
        <div style="color: #f00; font-weight: bold;">￥{{list.week_income}}元</div>
      </div>
      <div class="flexbc" style=" padding: 0.3rem 0; border-bottom: 1px #eaeaea solid;">
        <div>总收益</div>
        <div style="color: #f00; font-weight: bold;">￥{{list.total_income}}元</div>
      </div>
      <div class="flexbc" style=" padding: 0.3rem 0; border-bottom: 1px #eaeaea solid;">
        <div>可提现</div>
        <div style="color: #f00; font-weight: bold;">￥{{list.income}}元</div>
      </div>

      <div class="flexc" style="margin: 20px 0;">
        <div><van-button type="primary" size="normal" style="margin-top: 0.5rem;" @click="show = true" text="提现"></van-button></div>
        <div style="color: #999; font-size: 12px; margin-top: 0.5rem; margin-left: 0.2rem;" @click="$router.push('/tixianjilu')">
        	查看提现记录
        </div>
      </div>

      <div class="flexc">
        <div><van-button type="primary" size="normal" style="margin-top: 0.5rem;" @click="haibao" text="邀请新人"></van-button></div>
        <div style="color: #999; font-size: 12px; margin-top: 0.5rem; margin-left: 0.2rem;" @click="$router.push('/yaoqingjilu')">
        	查看邀请记录
        </div>
      </div>




    </div>

    <van-popup v-model="show">
    	<div style="padding: 0.3rem; width: 6.5rem;">
    		<div style="padding: 0.5rem 0;">请选择提现金额</div>
    		<div class="flex" style="gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.3rem;">
    			<div class="tli" @click="act = 0.3" :class="act == 0.3?'tliact':''">0.3</div>
    			<div class="tli" @click="act = 5" :class="act == 5?'tliact':''">5</div>
    			<div class="tli" @click="act = 10" :class="act == 10?'tliact':''">10</div>
    			<div class="tli" @click="act = 20" :class="act == 20?'tliact':''">20</div>
    			<div class="tli" @click="act = 50" :class="act == 50?'tliact':''">50</div>
    			<div class="tli" @click="act = 100" :class="act == 100?'tliact':''">100</div>
    		</div>
    		<van-button type="primary" size="normal" style="margin-top: 0.5rem;" text="提现" @click="tixian()"></van-button>
    	</div>
    </van-popup>




    <html2canvass ref="html2canvass" :item="item" v-if="html2canvaslog"></html2canvass>
    <footers></footers>
  </div>
</template>

<script>
  import footers from './footer.vue'
  import html2canvass from "./html2canvas.vue";
  export default {
    name: 'geren',
    components:{
      footers,html2canvass
    },
    data() {
      return {
        html2canvaslog:false,
        shoukuanzhanghu:{
          name:"",
          account:""
        },
        list:{},
        show:false,
        act:0.3,
        userinv:'',
        item:""
      }
    },
    created() {
      this.getlist2()
      this.getlist()

      axios.get(`${this.IP_URL}/api/auth/userinv`).then(response=> {
      		if (response.data.msg.code == 0) {
      			this.userinv = response.data.data.user_inv

      		} else {
      			vant.Toast(response.data.msg.info);
      		}
      	})

    },
    methods: {
      haibao: function(item) {
        this.html2canvaslog = false;
        this.item = {
          user_inv:this.userinv
        }
        this.$nextTick(() => {
          this.html2canvaslog = true;
        });
      },
      getlist2: function() {
        axios.get(`${this.IP_URL}/api/withdrawal/info`).then(response=> {
        		if (response.data.msg.code == 0) {
        			this.list = response.data.data
        		} else {
        			vant.Toast(response.data.msg.info);
        		}
        	})
      },

      getlist: function() {
        axios.get(`${this.IP_URL}/api/pay/accountget`).then(response=> {
        		if (response.data.msg.code == 0) {
        			this.shoukuanzhanghu = response.data.data
        		} else {
        			vant.Toast(response.data.msg.info);
        		}
        	})
      },

      tixian: function() {
        axios.post(`${this.IP_URL}/api/withdrawal/extract`,{income:this.act}).then(response=> {
        		if (response.data.msg.code == 0) {
              vant.Toast("申请提现成功，请等待管理员打款");
        			this.getlist()
        		} else {
        			vant.Toast(response.data.msg.info);
        		}
        	})
      },

    }
  }
</script>


<style scoped lang="less">

  .tli{ border: 1px #eaeaea solid; padding: 0.2rem 0.3rem; border-radius: 0.1rem; width: 1.7rem; text-align: center;}
  .tliact{ background: #07c160 !important; border: 1px #07c160 solid !important; color: #fff !important;}

</style>
